<template>
	<view class="searchHistory">
		<view class="searchHistory_Title">
			<view class="searchHistory_Title_name">
				历史搜索
			</view>
			<view class="searchHistory_Title_delete" @click="clearHistoryKey">
				<vanIcon size="18" name="delete-o" color="#666"  />
			</view>
		</view>
		<view class="searchHistory_Content" v-if="searchKeys.length">
			<template v-for="(item,index) in searchKeys">
				<searchResultItem :key="index" :searchKeys="item"></searchResultItem>
			</template>
		</view>
		<view class="searchHistory_Content" v-if="!searchKeys.length">
			<image src="/static/空.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import vanIcon from '@/wxcomponents/vant/@vant/icon'
	import searchResultItem from '@/packageA/components/search/searchResultItem.vue'
	export default{
		data(){
			return{
				searchKeys:['哈哈哈','啦啦啦','啦啦啦','啦啦啦','啦啦啦','hsfkdshakfhsdfkhsdfkhsdkfha']
			}
		},
		created() {
			console.log('历史记录挂载啦')
			let historySearchKeys = uni.getStorageSync('historySearchKeys') || []
			this.searchKeys = historySearchKeys
			console.log(historySearchKeys)
		},
		components:{vanIcon,searchResultItem},
		
		methods:{
			clearHistoryKey(){
				console.log(1)
				uni.removeStorageSync('historySearchKeys')
				while(this.searchKeys.length){
					this.searchKeys.pop()
				}
			}
		}
	}
</script>

<style lang="less">
	.searchHistory{
		width: 100%;
		.searchHistory_Title{
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: .8rem;
			.searchHistory_Title_name{
				font-size: 18px;
				font-weight: 500;
			}
		}
		.searchHistory_Content{
			box-sizing: border-box;
			padding: .9rem;
			display: flex;
			justify-content: start;
			align-items: center;
			flex-flow: row wrap; 
			font-size: .5rem;
			color: #888;
			image{
				width:3rem;
				margin: 0 auto;
			}
		}
	}
</style>